<script setup lang="ts">
import { watch, ref } from "vue";
import { SunoMedia } from "@/api/sunoStore";
import { homeStore } from "@/store";
import { NImage, NEmpty } from "naive-ui";
import { SvgIcon } from "@/components/common";
import { useRoute } from "vue-router";
import axios from "axios";
import { getToken, setToken } from "@/store/modules/auth/helper";
const route = useRoute();
console.log("🚀 ~ route:", route);
// if (route.query.id) {
//     axios.get(`/api/suno/GetMusic?musicId=${route.query.id}`, { headers: { token: getToken() } }).then(res => {
//         // console.log(res.data);
//         pObj.value = res.data.data[0] as SunoMedia

//     })
// }
if (route.params.uuid) {
  axios
    .get(`/api/suno/GetMusic?musicId=${route.params.uuid}`, {
      headers: { token: getToken() },
    })
    .then((res) => {
      // console.log(res.data);
      pObj.value = res.data.data[0] as SunoMedia;
    });
}
const isShare = ref<boolean>(!!route.query.id);

// const getData = () => {
//     axios.post('', FormData, {}).then(res => {
//     })

// }
const pObj = ref<SunoMedia>();
watch(
  () => homeStore.myData.act,
  (n) => {
    if (n == "goPlay") {
      let data = homeStore.myData.actData;
      console.log("🚀 ~ watch ~ data:", data);
      pObj.value = data as SunoMedia;
    }
  }
);
</script>
<template>
  <div v-if="pObj">
    <div class="w-full relative h-[300px] w-[300px]">
      <!-- {{ pObj }} -->
      <NImage :src="pObj.image_large_url" class="w-full h-full">
        <template #placeholder>
          <div class="w-full h-full justify-center items-center flex">
            <SvgIcon
              icon="line-md:downloading-loop"
              class="text-[60px] text-green-300"
            ></SvgIcon>
          </div>
        </template>
      </NImage>
      <div class="absolute bottom-0 right-0 p-2 text-white text-right">
        <h2 class="text-xl">{{ pObj.title }}</h2>
        <div class="">{{ $t("suno.style") }}：{{ pObj.metadata.tags }}</div>
      </div>
    </div>
    <audio
      :src="pObj.audio_url"
      v-if="isShare"
      controls
      style="margin: 20px auto"
    ></audio>

    <pre class="text-wrap p-2">{{ pObj.metadata.prompt }}</pre>
  </div>
  <div class="flex w-full h-full justify-center items-center" v-else>
    <n-empty :description="$t('suno.emputy')"></n-empty>
  </div>
</template>
